<template>
    <div class="orderedit">
        <div style="height: 44px;background-color: #fff;width:100%"></div>
        <up-navbar :safeAreaInsetTop="false" title="订单修改" :fixed="false" rightText="完成" @rightClick="returnAch"
            @leftClick="uni.navigateTo({url:'/pages/Achievement/Achievement'})" />

        <div style="height:20rpx"></div>
        <up-form labelPosition="left" :model="model1" :rules="rules" ref="form1"
            style="background-color: #fff;padding:0 40rpx">
            <up-form-item label="订单号" prop="userInfo.orderNumber" :borderBottom="true" ref="item1" labelWidth="160rpx">
                <up-input v-model="model1.userInfo.orderNumber" border="none" disabled disabledColor="#fff"></up-input>
            </up-form-item>

            <up-form-item label="姓名" prop="userInfo.name" :borderBottom="true" ref="item1" labelWidth="160rpx">
                <up-input v-model="model1.userInfo.name" border="none" style="width:128rpx" disabled
                    disabledColor="#fff"></up-input>
                <div class="phone">
                    <div sclass="phone_tit">联系电话1</div>
                    <up-input v-model="model1.userInfo.phoneFirst" border="none" style="width:128rpx" disabled
                        disabledColor="#fff" class="phone_input"></up-input>

                </div>
            </up-form-item>
            <up-form-item label="性别" prop="userInfo.sex" :borderBottom="true" ref="item1" labelWidth="160rpx">
                <up-input v-model="model1.userInfo.sex" border="none" style="width:128rpx" disabled
                    disabledColor="#fff"></up-input>
                <div class="phone">
                    <div sclass="phone_tit">成交时间</div>
                    <up-input v-model="model1.userInfo.dealTime" border="none" style="width:128rpx" disabled
                        disabledColor="#fff" class="phone_input"></up-input>

                </div>
            </up-form-item>
            <up-form-item label="产品名称" prop="userInfo.productName" :borderBottom="true" ref="item1" labelWidth="160rpx">
                <up-input v-model="model1.userInfo.productName" border="none" style="width:128rpx" disabled
                    disabledColor="#fff"></up-input>

            </up-form-item>

            <up-form-item label="产品标价" prop="userInfo.busPrice" :borderBottom="true" ref="item1" labelWidth="160rpx">
                <up-input v-model="model1.userInfo.busPrice" border="none" style="width:128rpx" disabled
                    disabledColor="#fff"></up-input>

            </up-form-item>
        </up-form>

        <div style="height: 20rpx;"></div>
        <up-form labelPosition="left" :model="model1" style="background-color: #fff;padding:0 40rpx">
            <up-form-item label="成交金额" prop="userInfo.amount" :borderBottom="true" ref="item1" labelWidth="160rpx"
                required="true">
                <up-input v-model="model1.userInfo.amount" border="none"
                    style="width:128rpx;"></up-input>

            </up-form-item>

            <up-form-item label="订单业绩" prop="userInfo.achievement" :borderBottom="true" ref="item1" labelWidth="160rpx"
                required="true">
                <up-input v-model="model1.userInfo.achievement"  :disabled="true" border="none"
                    style="width:128rpx;"></up-input>

            </up-form-item>

            <up-form-item label="是否退费" prop="userInfo.isRefund" :borderBottom="true" ref="item1" labelWidth="160rpx"
                required="true" @tap="show = true">
                <div style="display: flex;justify-content: space-between;align-items: center;flex:1;">
                    <div> <span :style="{ color: model1.userInfo.isReturns == '1' ? 'red' : '' }">{{ model1.userInfo.isReturns == '1' ? '是' : '否' }}</span></div>
                    <div><up-icon name="arrow-right" @tap="show = true" size="30rpx"></up-icon></div>
                </div>
            </up-form-item>

            <up-form-item  v-show="model1.userInfo.isReturns == '1'"  label="退费金额" prop="userInfo.retAmount" :borderBottom="true" ref="item1" labelWidth="130rpx"
                required="true">
                <up-input v-model="model1.userInfo.retAmount" border="none" placeholder="请输入内容"
                    style="width:128rpx;margin-left:40rpx;"></up-input>

            </up-form-item>

            <up-form-item label="退还业绩"  v-show="model1.userInfo.isReturns == '1'" prop="userInfo.retAchievement" :borderBottom="true" ref="item1" labelWidth="130rpx"
                required="true">
                <up-input v-model="model1.userInfo.retAchievement" border="none"  placeholder="请输入内容"
                    style="width:128rpx;margin-left:40rpx;"></up-input>

            </up-form-item>

        </up-form>



        <up-action-sheet :actions="list" :title="title" :show="show" @close="show = false" :closeOnClickAction="true"
            :closeOnClickOverlay="true" @select="handleSelect"></up-action-sheet>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app';
import { editOrderList } from '../../utils/performance';
const show = ref(false)
const list = ref([
    {
        name: '是',
        id: 1

    },
    {
        name: '否', // 开启后文字不显示    
        id: 2
    }
]);
const model1 = ref({
    userInfo: {
        orderNumber: '',
        name: '',
        phoneFirst: '',
        sex: '',
        dealTime: '',
        productName: '',
        busPrice: '',
        amount: '',
        achievement: '',
        isReturns: '',
        orderId: '',
        retAmount:'',
        retAchievement:''
    }
})

// 处理选项点击
const handleSelect = (index) => {
    // 更新是否退费状态
    model1.value.userInfo.isReturns = index.id
    // 关闭sheet
    show.value = false
}

onLoad((Option) => {
    model1.value.userInfo = JSON.parse(uni.getStorageSync('userObject'))
})

const returnAch = async () => {
        // 判断退费金额是否小于成交金额
        if (model1.value.userInfo.retAmount >= model1.value.userInfo.amount) {
            uni.showToast({
                title: '退费金额必须小于成交金额',
                icon: 'none',
                duration: 2000
            })
            return
        }

        // 判断退还业绩是否小于订单业绩
        if (model1.value.userInfo.retAchievement >= model1.value.userInfo.achievement) {
            uni.showToast({
                title: '退还业绩必须小于订单业绩',
                icon: 'none',
                duration: 2000
            })
            return
        }

    try {
        const res = await editOrderList({
            achievement: model1.value.userInfo.achievement,
            amount: model1.value.userInfo.amount,
            isReturns: model1.value.userInfo.isReturns,
            orderId: model1.value.userInfo.orderId,
            retAchievement: model1.value.userInfo.retAchievement,
            retAmount: model1.value.userInfo.retAmount,
        })

        if (res.code == 200) {
            console.log(res)
            uni.showToast({
                title: '修改成功',
                icon: 'success',
                duration: 2000
            })
            uni.navigateTo({ url: '/pages/Achievement/Achievement'})
        }
    } catch (e) {
        console.log(e)
    }
}
</script>


<style lang="scss">
.orderedit {
    width: 100%;
    height: 100vh;
    background-color: rgba(239, 239, 239, 1);

    .u-navbar__content__right {
        color: #4095E5 !important;
    }

    .phone {
        width: 360rpx;
        display: flex;
        align-items: center;

        .phone_tit {
            color: rgb(16, 16, 16);
            font-size: 30rpx;
            text-align: left;
            font-family: PingFangSC-regular;
        }

        .phone_input {
            margin-left: 32rpx;
        }
    }





}


/* #ifndef APP-NVUE */
page {
    background-color: $u-bg-color;
}

/* #endif */

.u-page {
    padding: 0;
    flex: 1;
    background-color: $u-bg-color;

    &__item {

        &__title {
            color: $u-tips-color;
            background-color: $u-bg-color;
            padding: 15px;
            font-size: 15px;

            &__slot-title {
                color: $u-primary;
                font-size: 14px;
            }
        }
    }
}

.u-nav-slot {
    @include flex;
    align-items: center;
    justify-content: space-between;
    border-width: 0.5px;
    border-radius: 100px;
    border-color: $u-border-color;
    padding: 3px 7px;
    opacity: 0.8;
}
</style>